<script setup>
import { ref } from 'vue'

const resumeData = ref({
  basics: {
    name: '',
    title: '',
    email: '',
    phone: '',
    location: '',
    about: ''
  },
  skills: [
    { id: 1, name: 'JavaScript', level: 80 },
    { id: 2, name: 'Vue.js', level: 85 },
    { id: 3, name: 'CSS', level: 75 }
  ],
  experience: [
    {
      id: 1,
      company: '',
      position: '',
      period: '',
      description: ''
    }
  ],
  education: [
    {
      id: 1,
      school: '',
      degree: '',
      period: '',
      description: ''
    }
  ],
  projects: [
    {
      id: 1,
      name: '',
      role: '',
      description: ''
    }
  ]
})

const activeSection = ref('basics')
const showPreview = ref(false)

const sections = [
  { id: 'basics', name: '基本信息', icon: '👤' },
  { id: 'skills', name: '技能特长', icon: '⚔️' },
  { id: 'experience', name: '工作经验', icon: '💼' },
  { id: 'education', name: '教育背景', icon: '🎓' },
  { id: 'projects', name: '项目经历', icon: '🏆' }
]

const addItem = (section) => {
  const newId = resumeData.value[section].length + 1
  const newItem = { id: newId }
  resumeData.value[section].push(newItem)
}

const removeItem = (section, id) => {
  resumeData.value[section] = resumeData.value[section].filter(item => item.id !== id)
}
</script>

<template>
  <div class="resume-editor">
    <div class="editor-container">
      <!-- 编辑区域 -->
      <div class="edit-section pixel-card">
        <div class="section-tabs">
          <button 
            v-for="section in sections"
            :key="section.id"
            :class="['tab-btn', activeSection === section.id ? 'active' : '']"
            @click="activeSection = section.id"
          >
            <span class="tab-icon">{{ section.icon }}</span>
            {{ section.name }}
          </button>
        </div>

        <!-- 基本信息表单 -->
        <div v-if="activeSection === 'basics'" class="form-section">
          <div class="form-grid">
            <div class="form-group">
              <label>姓名</label>
              <input 
                v-model="resumeData.basics.name"
                type="text"
                class="pixel-input"
                placeholder="你的名字"
              >
            </div>
            <div class="form-group">
              <label>职位</label>
              <input 
                v-model="resumeData.basics.title"
                type="text"
                class="pixel-input"
                placeholder="期望职位"
              >
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input 
                v-model="resumeData.basics.email"
                type="email"
                class="pixel-input"
                placeholder="联系邮箱"
              >
            </div>
            <div class="form-group">
              <label>电话</label>
              <input 
                v-model="resumeData.basics.phone"
                type="tel"
                class="pixel-input"
                placeholder="联系电话"
              >
            </div>
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea 
              v-model="resumeData.basics.about"
              class="pixel-input"
              rows="4"
              placeholder="简单介绍一下自己..."
            ></textarea>
          </div>
        </div>

        <!-- 技能特长表单 -->
        <div v-if="activeSection === 'skills'" class="form-section">
          <button class="pixel-btn add-btn" @click="addItem('skills')">
            添加技能
          </button>
          <div class="skills-list">
            <div 
              v-for="skill in resumeData.skills"
              :key="skill.id"
              class="skill-item"
            >
              <div class="skill-header">
                <input 
                  v-model="skill.name"
                  type="text"
                  class="pixel-input"
                  placeholder="技能名称"
                >
                <button 
                  class="pixel-btn remove-btn"
                  @click="removeItem('skills', skill.id)"
                >
                  ×
                </button>
              </div>
              <div class="skill-level">
                <input 
                  v-model="skill.level"
                  type="range"
                  min="0"
                  max="100"
                  class="pixel-range"
                >
                <span>{{ skill.level }}%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 工作经验表单 -->
        <div v-if="activeSection === 'experience'" class="form-section">
          <button class="pixel-btn add-btn" @click="addItem('experience')">
            添加工作经验
          </button>
          <div class="experience-list">
            <div 
              v-for="exp in resumeData.experience"
              :key="exp.id"
              class="experience-item pixel-card"
            >
              <button 
                class="pixel-btn remove-btn"
                @click="removeItem('experience', exp.id)"
              >
                ×
              </button>
              <div class="form-grid">
                <div class="form-group">
                  <label>公司名称</label>
                  <input 
                    v-model="exp.company"
                    type="text"
                    class="pixel-input"
                    placeholder="公司名称"
                  >
                </div>
                <div class="form-group">
                  <label>职位</label>
                  <input 
                    v-model="exp.position"
                    type="text"
                    class="pixel-input"
                    placeholder="担任职位"
                  >
                </div>
                <div class="form-group">
                  <label>时间段</label>
                  <input 
                    v-model="exp.period"
                    type="text"
                    class="pixel-input"
                    placeholder="2020.01 - 2022.01"
                  >
                </div>
              </div>
              <div class="form-group">
                <label>工作描述</label>
                <textarea 
                  v-model="exp.description"
                  class="pixel-input"
                  rows="3"
                  placeholder="描述你的工作内容和成就..."
                ></textarea>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他部分类似... -->
      </div>

      <!-- 预览区域 -->
      <div class="preview-section pixel-card">
        <div class="preview-header">
          <h2>实时预览</h2>
          <div class="preview-actions">
            <button class="pixel-btn">
              <span>💾</span>
              保存
            </button>
            <button class="pixel-btn">
              <span>📤</span>
              导出
            </button>
          </div>
        </div>
        <div class="preview-content">
          <!-- 简历预览内容 -->
          <div class="resume-preview">
            <h1 class="preview-name">{{ resumeData.basics.name || '你的名字' }}</h1>
            <h2 class="preview-title">{{ resumeData.basics.title || '职位头衔' }}</h2>
            
            <div class="preview-contact">
              <span v-if="resumeData.basics.email">📧 {{ resumeData.basics.email }}</span>
              <span v-if="resumeData.basics.phone">📱 {{ resumeData.basics.phone }}</span>
            </div>

            <div class="preview-section">
              <h3>🎮 技能特长</h3>
              <div class="preview-skills">
                <div 
                  v-for="skill in resumeData.skills"
                  :key="skill.id"
                  class="preview-skill"
                >
                  <div class="skill-name">{{ skill.name }}</div>
                  <div class="skill-bar">
                    <div 
                      class="skill-progress"
                      :style="{ width: skill.level + '%' }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 其他预览部分... -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.resume-editor {
  padding: 1rem;
}

.editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 80vh;
}

.section-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  background: var(--background-light);
  border: var(--pixel-border) solid var(--text-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-family: 'PixelFont', sans-serif;
  transition: all 0.2s;
}

.tab-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.form-section {
  padding: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'PixelFont', sans-serif;
  color: var(--text-primary);
}

.add-btn {
  margin-bottom: 1rem;
}

.remove-btn {
  padding: 0.4rem 0.8rem;
  background: var(--primary-color);
}

.skill-item, .experience-item {
  margin-bottom: 1rem;
  padding: 1rem;
  border: var(--pixel-border) solid var(--text-primary);
}

.skill-header {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.skill-level {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.pixel-range {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  background: var(--text-secondary);
  border-radius: 4px;
}

.pixel-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-color);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.preview-section {
  background: var(--background-light);
  padding: 2rem;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.preview-actions {
  display: flex;
  gap: 1rem;
}

.resume-preview {
  padding: 2rem;
  background: white;
  border: var(--pixel-border) solid var(--text-primary);
}

.preview-name {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.preview-title {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.preview-contact {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.preview-skills {
  display: grid;
  gap: 1rem;
}

.preview-skill {
  display: grid;
  gap: 0.5rem;
}

.skill-bar {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s;
}
</style> 